<template>
  <div :class="wrpCls">
    <div class="x-user-bar">
      <!-- 换肤 -->
      <!-- <a-dropdown placement="bottomRight"
                  :trigger="['click']">
        <span class="ant-pro-global-header-trigger item">
          <icon-skin style="width:20px; vertical-align: middle; margin-top: -4px;" />
        </span>
        <template v-slot:overlay>
          <a-menu class="skin-menu">
            <a-menu-item v-for="(item, index) in themeColors"
                         :key="index"
                         @click="handleThemeChange(item.value)">
              <span class="skin-menu-item"
                    :style="{'background-color': item.value}"></span>
              {{ item.name }}
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown> -->
      <slot />
    </div>

    <!-- 用户个人信息及下拉菜单 -->
    <a-dropdown v-if="fullName"
                placement="bottomRight"
                class="ant-pro-global-header-index-action">
      <span class="ant-pro-account-avatar">
        <a-avatar v-if="avatar"
                  size="small"
                  :src="avatar"
                  class="antd-pro-global-header-index-avatar" />
        <a-avatar v-else
                  size="small"
                  icon="user"
                  class="antd-pro-global-header-index-avatar" />
        <span style="display:inline-block; vertical-align:middle; padding-left: 10px">{{ fullName }}</span>
      </span>
      <template #overlay>
        <!-- 自定义用户下拉菜单 -->
        <template v-if="$slots.userMenu">
          <slot name="userMenu" />
        </template>
        <template v-else>
          <a-menu :visible="true">
            <!-- 工作单位 -->
            <a-sub-menu>
              <span slot="title">
                <a-icon type="deployment-unit" />
                工作单位&nbsp;
              </span>
              <a-menu-item v-for="(item, index) in unitList"
                           :key="index">
                <div @click="handleUnitClick(index, item)"
                     :class="item.selected ? 'x-user-menu-unit-active' : ''">
                  {{ item.name }}
                  <a-icon type="check"
                          v-if="item.selected" />
                </div>
              </a-menu-item>
            </a-sub-menu>

            <!-- 个人信息 -->
            <!--
          <a-menu-item @click="handleUserInfo">
            <a-icon type="user"
                    key="center" />
            个人信息
          </a-menu-item>
           -->
            <a-menu-item @click="$emit('showPersonalSetting')">
              <!-- <a-menu-item @click="$refs['personalSetting'].show()"> -->
              <a-icon type="profile" />
              个性化设置
            </a-menu-item>
            <!-- <a-sub-menu>
              <span slot="title">
                <a-icon type="profile" />
                个性化设置
              </span>
            </a-sub-menu> -->

            <a-menu-item @click="onPasswordClick">
              <a-icon type="lock" />
              修改密码
            </a-menu-item>

            <!-- 退出登录 -->
            <a-menu-divider />
            <a-menu-item key="logout"
                         @click="handleLogout">
              <a-icon type="logout" />
              退出登录
            </a-menu-item>
          </a-menu>
        </template>
      </template>
    </a-dropdown>

    <!-- 修改密码表单 -->
    <a-modal :centered="true"
             :maskClosable="false"
             title="修改密码"
             :visible="visible"
             :confirm-loading="loading"
             @ok="handleChangePassword"
             @cancel="visible=false">
      <a-form-model :model="form"
                    ref="form"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 18 }"
                    :rules="{
                      oldPass: [{required: true, message: '此项为必填项'}],
                      newPass: [{validator: validatePass, trigger: 'blur'},{required: true, message: '此项为必填项'}],
                      mpassword: [{validator: validatePass, trigger: 'blur'},{required: true, message: '此项为必填项'}]
                    }">
        <a-form-model-item label="原密码"
                           prop="oldPass">
          <a-input v-model.trim="form.oldPass"
                   type="password" />
        </a-form-model-item>
        <a-form-model-item label="新密码"
                           prop="newPass">
          <a-input v-model.trim="form.newPass"
                   type="password" />
        </a-form-model-item>
        <a-form-model-item label="确认密码"
                           prop="mpassword">
          <a-input v-model.trim="form.mpassword"
                   type="password" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { Avatar, Menu } from 'ant-design-vue'
import IconSkin from '../assets/icons/skin.svg?inline'
import LogoSvg from '../assets/logo.svg?inline'
import { changePassword } from '../api/user/index'
import { changeLoginUnit } from '../api/auth/index'

Vue.use(Avatar)
Vue.use(Menu)

export default {
  name: 'UserHeader',
  components: { IconSkin, LogoSvg },
  props: {
    fullName: {
      type: String,
      default: null
    },
    avatar: {
      type: String,
      default: null
    },
    unitList: {
      type: Array,
      default: () => []
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    },
    handleLogout: {
      type: Function,
      default: () => { }
    },
    handleChangeUnit: {
      type: Function,
      default: () => { }
    },
    handleUserInfo: {
      type: Function,
      default: () => { }
    },
    themeColors: {
      type: Array,
      default: () => [
        {
          name: '拂晓蓝',
          value: '#1890FF'
        },
        {
          name: '火山',
          value: '#FA541C'
        },
        {
          name: '日暮',
          value: '#FAAD14'
        },
        {
          name: '明青',
          value: '#13C2C2'
        },
        {
          name: '极光绿',
          value: '#52C41A'
        },
        {
          name: '薄暮',
          value: '#F5222D'
        },
        {
          name: '极客蓝',
          value: '#2F54EB'
        },
        {
          name: '酱紫',
          value: '#722ED1'
        }
      ]
    },
    handleThemeChange: {
      type: Function,
      default: () => { }
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      form: {}
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${this.isMobile || !this.topMenu ? 'light' : this.theme}`]: true
      }
    }
  },
  methods: {
    onPasswordClick () {
      this.visible = true
      this.loading = false
      this.form = {}
    },
    handleUnitClick (index, item) {
      if (this.unitList[index].selected) {
        return
      }
      this.unitList.map((x, i) => {
        x.selected = false
      })
      const unit = this.unitList[index]
      changeLoginUnit(unit.unitUserId).then((response) => {
        location.replace('/')
      })
    },
    validatePass (rule, value, callback) {
      // if (value.length < 6 || value.length > 10) {
      //   callback(new Error('请输入6~10位密码'))
      // } else {
      //   callback()
      // }
    },
    handleChangePassword () {
      this.$refs.form.validate((ok) => {
        if (!ok) {
          return
        }
        this.loading = true
        changePassword(this.form)
          .then((response) => {
            this.visible = false
            this.$router.redirectLogin(this.$route.fullpath)
          })
          .finally(() => {
            this.loading = false
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-drop-down {
  ::v-deep .action {
    margin-right: 8px;
  }
  ::v-deep .ant-dropdown-menu-item {
    min-width: 160px;
  }
}
.skin-menu-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0px 4px;
  border-radius: 2px;
  vertical-align: middle;
  margin-top: -4px;
}
.x-user-menu-unit-active {
  color: #bf772d;
}
.x-user-bar {
  display: inline-block;
  height: 100%;
  box-sizing: border-box;
  vertical-align: top;
  > * {
    margin: 0px 10px;
    padding: 0px;
  }
  > *:hover {
    background-color: transparent;
  }
  > i {
    height: 100%;
    font-size: var(--font-size-20);
    line-height: 65px;
    cursor: pointer;
  }
}
</style>
